<template>
  <div class="XmPagination-container">
    <el-pagination
      :total="pager.total"
      :current-page="pager.current"
      :page-size="pager.pageSize"
      @current-change="changePage"
      layout="prev, pager, next"
    ></el-pagination>
    <el-select v-model="pager.pageSize" @change="selectValueChange">
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <span style="margin: auto 12px">
      跳转到
      <el-tooltip
        v-model="isEnterTip"
        effect="dark"
        content="输入完毕，使用回车确认"
        placement="top"
      >
        <el-input
          v-model="jumperPage"
          @keyup.enter="inputPageChange"
        ></el-input>
      </el-tooltip>
      页
    </span>
  </div>
</template>
<script>
  import { reactive, ref, computed, onMounted } from 'vue'
  import { ElMessage as message } from 'element-plus'
  import { isNumber } from '@/utils/validate.js'
  export default {
    name: 'XmPagination',
    emits: ['pagination'],
    props: { total: Number, modelValue: Object, defaultSize: Number },
    setup(props, context) {
      const options = [
        {
          label: '5条/页',
          value: 5,
        },
        {
          label: '10条/页',
          value: 10,
        },
        {
          label: '15条/页',
          value: 15,
        },
        {
          label: '20条/页',
          value: 20,
        },
        {
          label: '50条/页',
          value: 50,
        },
      ]

      const pager = reactive({
        current: 1,
        total: 0,
        pageSize: 5,
        pagingResource: '',
        orderType: 1, // ascending 生序 descending降序
      })
      onMounted(() => {
        if (props.defaultSize) pager.pageSize = props.defaultSize
      })
      let jumperPage = ref(null)
      const selectValueChange = function (val) {
        pager.pageSize = val
        context.emit('pagination', pager)
      }

      const changePage = function (val) {
        pager.current = val
        context.emit('pagination', pager)
      }

      const inputPageChange = function () {
        if (!isNumber(jumperPage.value)) {
          message({ message: '请输入数字', type: 'warning' })
          return
        }
        pager.current = parseInt(jumperPage.value)
        context.emit('pagination', pager)
        jumperPage.value = null
      }
      pager.total = computed({
        get() {
          return props.total ? props.total : 0
        },
        set(val) {
          console.log('val ' + JSON.stringify(val))
        },
      })

      const reset = function () {
        pager.current = 1
        pager.total = 0
        pager.pageSize = 5
      }
      return {
        options,
        isEnterTip: false,
        pager,
        selectValueChange,
        changePage,
        inputPageChange,
        jumperPage,
        reset,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .XmPagination-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 12px;
    // padding-bottom: 12px;
    .el-select {
      width: 100px;
    }
    .el-input {
      width: 50px;
    }
  }
</style>
